3.04. Шрифты

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Шрифты

1. Что такое шрифт с технической точки зрения

Шрифт (font) — это программно-дизайнерская реализация гарнитуры (typeface), представленная в виде набора символов, каждый из которых имеет строго определённые геометрические параметры:

• контур (outline), задаваемый в векторном виде (обычно через кривые Безье второго или третьего порядка),
• метрики (ширину, высоту, расстояния между базовыми линиями, выносами ascender/descender),
• инструкции растеризации (hinting), оптимизирующие отображение на экранах с низким DPI,
• дополнительные метаданные (имя шрифта, автор, лицензия, поддерживаемые языки, OpenType-функции и пр.).

В отличие от гарнитуры — абстрактного дизайнерского замысла (например, «Helvetica»), — шрифт — это конкретный цифровой файл, реализующий гарнитуру в определённом начертании (Regular, Bold, Italic и т.д.). Одна гарнитура может иметь сотни шрифтов (всевозможные веса, ширины, варианты для капительного набора, моноширинные версии и т.п.).

---

2. Форматы шрифтов: эволюция и технические особенности

Формат	Год появления	Технологическая основа	Поддержка	Особенности
Bitmap Fonts (.FON, .FNT)	1980-е	Растровые изображения символов для фиксированных размеров	Устаревший, частично в Windows 3.x и DOS	Высокая производительность на слабых системах, но отсутствие масштабируемости. При увеличении — пикселизация. Использовались в ранних операционных системах и терминалах.
PostScript Type 1 (.PFB/.PFM)	1984 (Adobe)	Векторные контуры на основе кубических кривых Безье + отдельный файл метрик	Поддержка в старых версиях macOS, UNIX, LaTeX, частично в современных DTP-системах	Один из первых масштабируемых форматов. Требует двух файлов (бинарный + метрика). Замещён OpenType. Adobe прекратила поддержку с 2023 г.
TrueType (.TTF)	1991 (Apple, затем Microsoft)	Векторные контуры на основе квадратичных кривых Безье, встроенные инструкции hinting внутри единого файла	Повсеместно: Windows, macOS, Linux, Android, iOS, веб	Самый массовый формат на протяжении 1990–2010-х. Отличается точным контролем растеризации на низких разрешениях благодаря байткоду hinting, но сложен в реализации. Поддерживает подмножества глифов (subset embedding).
OpenType (.OTF / .TTF)	1996 (Microsoft & Adobe), стандартизирован ISO/IEC 14496-22	Могут содержать как квадратичные (TrueType outline), так и кубические (CFF/PostScript outline) контуры.	Повсеместно: все современные ОС, браузеры, редакторы	Универсальный, расширяемый контейнер. Может включать:

• до 65 535 глифов (включая лигатуры, альтернативные формы, символы расширенных языков),
• OpenType Layout Features (например, contextual alternates, stylistic sets, small caps),
• цветные шрифты (через COLR/CPAL, SVG-in-OT, CBDT),
• переменные шрифты (с 2016 г.).
  .OTF — традиционно означает CFF-контур; .TTF в OpenType-контексте — TrueType-контур. Оба — валидные OpenType-файлы. | | WOFF / WOFF2 | 2009 / 2014 (W3C) | Сжатая обёртка над OpenType (.TTF/.OTF) с метаданными и таблицами оптимизации | Все современные браузеры (Chrome, Firefox, Safari ≥10, Edge) |
• WOFF — сжатие zlib, +10–15% к размеру исходного OTF/TTF.
• WOFF2 — сжатие Brotli, экономия до 30–50% по сравнению с WOFF.
  Используются исключительно в вебе; не предназначены для установки в систему. Включают механизмы лицензирования и проверки целостности (metadata block, private data). |

Примечание: Современные шрифты практически всегда поставляются в OpenType-формате, даже если расширение .ttf. Это не ошибка — .ttf может быть и TrueType, и OpenType с TrueType outline.

---

3. Технические компоненты шрифта

Любой OpenType-шрифт состоит из табличной структуры — набора именованных блоков («tables»), описанных в спецификации ISO/IEC 14496-22. Ключевые таблицы:

• head — заголовок шрифта: версия, флаги, метрики шрифта в целом (units per em, даты создания/модификации, направление письма).
• hhea, vhea — горизонтальная и вертикальная метрическая информация (макс. высоты ascender/descender, line gap).
• hmtx, vmtx — ширины и позиции сдвига (left side bearing) для каждого глифа по горизонтали/вертикали.
• maxp — макс. параметры: число глифов, вложенность компонентов и пр.
• cmap — таблица сопоставления кодовых точек Unicode → идентификаторам глифов. Критически важна для корректного отображения текста. Может содержать несколько подтаблиц под разные кодировки (UCS-2, UTF-16, Mac Roman и т.д.).
• glyf (для TTF-outline) или CFF (для CFF-outline) — векторные контуры глифов.
• loca — таблица локаторов глифов, указывает смещение каждого глифа в glyf.
• name — текстовые метаданные: имя шрифта, автор, лицензия, названия стилей («Bold», «Italic»), локализованные имена.
• OS/2 — расширенные метрики Windows/macOS: вес (usWeightClass: 100–900), ширина (usWidthClass), капительный размер, Unicode-блоки, лицензионные флаги (embedding permissions).
• post — информация для PostScript-вывода: имена глифов в формате Adobe (.notdef, A, uni0410 и т.д.), поддержка Italic angle.
• GSUB, GPOS — OpenType Layout: замены глифов (ligatures, contextual alternates) и позиционирование (кернинг, диакритики).
• STAT — (для переменных шрифтов) метаданные осей вариаций (weight, width, italic, custom).
• fvar — описание осей вариаций и именованных экземпляров («Bold», «Condensed»).
• gvar (TTF) / CFF2 (CFF) — вариационные данные глифов.

Без cmap, glyf/CFF, head, hhea, hmtx и maxp шрифт не может быть корректно отображён. Остальные таблицы опциональны, но критичны для профессионального типографского контроля.

---

4. Шрифтовые метрики и терминология

• Em-square (units per em) — виртуальный квадрат, в котором проектируется глиф (обычно 1000 или 2048 единиц). Не соответствует физической высоте символа — просто система координат.
• Baseline — воображаемая горизонтальная линия, на которую «ставятся» символы латиницы/кириллицы.
• Ascender — часть символа, выступающая выше baseline (например, в «h», «л»).
• Descender — часть, опускающаяся ниже baseline («p», «у»).
• Cap height — высота прописных букв («H», «М»).
• X-height — высота строчных букв без выносных элементов («x», «о», «а»). Ключевой параметр читаемости.
• Leading — межстрочный интервал (в типографике — расстояние между baseline соседних строк). В CSS — line-height.
• Kerning — коррекция расстояния между конкретными парами символов («AV», «То», «Лю») для визуального баланса. Реализуется в GPOS.
• Tracking / Letter-spacing — равномерное изменение расстояния между всеми символами в блоке.
• Weight — насыщенность: 100 Thin — 900 Black (по спецификации CSS и OS/2.usWeightClass).
• Width — ширина: 1 Ultra-condensed — 9 Ultra-expanded.

---

5. Установка и управление шрифтами в операционных системах

5.1. Windows

• Механизм установки:
  • Через Проводник: копирование .ttf/.otf в C:\Windows\Fonts (или двойной клик → «Установить»).
  • Через PowerShell: Add-AppxPackage -Path font.otf (для пользовательских шрифтов в режиме per-user).
  • Через API AddFontResourceExW() (для программной установки без перезагрузки).
• Хранение:
  • Системные шрифты — C:\Windows\Fonts\ (запись требует прав администратора).
  • Пользовательские — %LOCALAPPDATA%\Microsoft\Windows\Fonts\ (доступно с Windows 10 1709).
• Кэширование:
  Служба Windows Font Cache Service (FontCache) создаёт индексы в %SystemRoot%\ServiceProfiles\LocalService\AppData\Local\FontCache\. При повреждении — сброс через net stop fontcache && net start fontcache.
• Особенности:
  • Поддержка OpenType с 2007 (Windows Vista).
  • Переменные шрифты — с Windows 10 1703 (частично), полноценно — с 1809.
  • Цветные шрифты (COLR/CPAL, CBDT) — с Windows 8.1 (через DirectWrite).
  • Не обновляет список шрифтов в приложениях «на лету»: требуется перезапуск редактора (кроме UWP-приложений, использующих DirectWrite).

5.2. macOS

• Механизм установки:
  • Font Book.app: перетаскивание файла → «Установить шрифт» (валидация, проверка дубликатов).
  • Через терминал: копирование в ~/Library/Fonts/ (пользовательский) или /Library/Fonts/ (системный).
• Хранение:
  • Пользователь: ~/Library/Fonts/
  • Системный: /Library/Fonts/
  • Системные Apple-шрифты: /System/Library/Fonts/ (только для чтения).
• Кэширование:
  Кэши (com.apple.fonts) хранятся в ~/Library/Caches/ и /System/Library/Caches/. Сброс — atsutil databases -removeUser (пользователь) или sudo atsutil databases -remove (система), затем atsutil server -shutdown и -ping.
• Особенности:
  • Поддержка OpenType с macOS X 10.0 (2001).
  • Переменные шрифты — с macOS 10.13.4 (High Sierra).
  • Цветные шрифты (sbix, COLR) — с macOS 10.7 (Lion).
  • Автоматическая деактивация дубликатов в Font Book.

5.3. Linux (на примере Ubuntu / GNOME)

• Механизм установки:
  • Пользовательский: копирование в ~/.fonts/ или ~/.local/share/fonts/, затем fc-cache -fv.
  • Системный: копирование в /usr/share/fonts/, sudo fc-cache -fv.
• Система управления:
  Используется fontconfig — конфигурация через XML-файлы в /etc/fonts/ и ~/.config/fontconfig/. Основные команды:
  • fc-list — список установленных шрифтов.
  • fc-match "Arial" — какой шрифт будет использован вместо Arial.
  • fc-query font.otf — анализ метаданных шрифта.
• Особенности:
  • Поддержка OpenType — через FreeType (библиотека рендеринга).
  • Переменные шрифты — с FreeType 2.8 (2017), требует HarfBuzz ≥2.0 для layout.
  • Цветные шрифты — поддержка COLR/CPAL в FreeType ≥2.10.0 (2019), SVG-in-OT — экспериментально.
  • По умолчанию не включён hinting для TTF; настраивается в fonts.conf.

5.4. Android

• Системные шрифты: находятся в /system/fonts/, только для чтения (требуется root для замены).
• Прикладная установка:
  • Приложения могут включать шрифты в res/font/ (XML-дескрипторы) или assets/fonts/.
  • Начиная с Android 8.0 (API 26), поддержка FontRequest через Google Fonts (Downloadable Fonts).
• Особенности:
  • Используется Skia (графическая библиотека Chrome/Flutter) + Minikin (layout/rasterization).
  • Переменные шрифты — с Android 10 (API 29).
  • Цветные шрифты — COLR/CPAL с Android 8.1, CBDT (bitmap color) — с Android 5.0.
  • Шрифты по умолчанию: Roboto (латиница/кириллица), Noto Sans (многоязычность).

5.5. iOS / iPadOS

• Системные шрифты: /System/Library/Fonts/, недоступны для модификации.
• Прикладная установка:
  • Только через UIAppFonts в Info.plist — указать путь к .ttf/.otf в bundle.
  • Начиная с iOS 13 — поддержка SF Pro Rounded и переменных шрифтов через UIFontDescriptor.
• Особенности:
  • Используется Core Text + Core Graphics.
  • Переменные шрифты — с iOS 11 (частично), полноценно — с iOS 13.
  • Цветные шрифты — sbix и COLR с iOS 9.
  • Системный стек: San Francisco (SF Pro, SF Compact), New York (для печати), Noto (иероглифы).

---

6. Переменные шрифты (Variable Fonts)

Техническая суть

Переменный шрифт — это один файл, содержащий непрерывный диапазон вариаций одного дизайна, задаваемых через оси (axes). Каждая ось — числовая величина в пределах [min, max], для которой определены контрольные точки (masters). Интерполяция между ними происходит в реальном времени.

Стандартные оси (по спецификации OpenType 1.8):

Тег	Название	Диапазон по умолчанию	Примеры
wght	Weight	1–1000	Thin (100) → Black (900)
wdth	Width	50–200%	Ultra-condensed (50) → Ultra-expanded (200)
ital	Italic	0–1	Прямой (0) → Курсив (1) — без наклона, т.е. true italic (отдельный дизайн)
slnt	Slant	−90° — 0°	Обычный (0) → Наклонный (−12°) — наклон без изменения формы (oblique)

Пользовательские (custom) оси

Могут быть любыми:

• opsz — Optical Size (оптический размер: от 6pt для мелкого текста до 72pt для заголовков — меняются пропорции, контраст, засечки),
• GRAD — Grade (визуальная насыщенность без изменения ширины/габаритов — для компенсации восприятия на разных фонах),
• YOPQ/XOPQ — толщина вертикальных/горизонтальных штрихов (в Recursive),
• CASL — Casual (в Amstelvar — степень неформальности начертания).

Преимущества

• Экономия трафика: один файл вместо 10–20 статичных (Bold, BoldItalic, Condensed, Light и т.д.).
• Адаптивность: динамическая подстройка под контекст (например, утолщение при низком DPI или слабом освещении).
• Креативный контроль: плавные переходы в анимациях (например, font-variation-settings: "wght" 400 → 700 в CSS).

Поддержка в вебе

@font-face {
  font-family: 'Inter VF';
  src: url('Inter.var.woff2') format('woff2-variations');
  font-weight: 100 900; /* диапазон */
  font-style: normal;
}

.text {
  font-variation-settings: "wght" 650, "wdth" 95;
}

Поддерживаются в Chrome ≥62, Firefox ≥60, Safari ≥11, Edge ≥79.

---

7. Цветные шрифты (Color Fonts)

Форматы реализации

Формат	База	Особенности	Поддержка
COLR/CPAL	OpenType	Векторные слои (до 255) с плоской заливкой. Каждый слой — обычный глиф + цвет из палитры (CPAL).	Windows 8.1+, Chrome 91+, Firefox 103+, Android 8.1+
SVG-in-OT	OpenType + SVG	Внедрение SVG-фрагментов (градиенты, маски, фильтры).	Firefox 26+, iOS 7+, частично в Windows (только в EdgeHTML)
CBDT/CBLC	Google	Растровые изображения (PNG) для каждого глифа и размера.	Android 5.0+, Chrome/Chromium
sbix	Apple	Растровые изображения (PNG, JPEG) с DPI-зависимыми слоями.	macOS 10.7+, iOS 9+

Применение

• Эмодзи (все современные эмодзи — цветные шрифты).
• Иконки в интерфейсах (например, Twemoji Mozilla, Noto Color Emoji).
• Брендированные символы (логотипы в тексте).
• Педагогические материалы (цветные буквы для детей).

Пример: font-palette в CSS

@font-palette-values --warm {
  font-family: 'Noto Color Emoji';
  base-palette: 2; /* выбор палитры из CPAL */
  override-colors:
    1 #ffe0b2, /* оранжевый вместо жёлтого */
    2 #ff5722; /* красный вместо чёрного */
}

.warm-text { font-palette: --warm; }

Поддержка: Firefox ≥103, Canary Chrome (экспериментально).

---

8. Лицензирование шрифтов

Типы лицензий

• SIL Open Font License (OFL) — наиболее распространённая открытая лицензия. Разрешает модификацию, коммерческое использование, встраивание в ПО. Запрещает продажу самого шрифта как продукта. Обязательно сохранение файла OFL.txt.
• Apache 2.0 / MIT — редко для шрифтов, но встречается (например, Roboto — Apache 2.0).
• Proprietary (Commercial) — требует покупки лицензии. Различают:
  • Desktop — установка на рабочие станции,
  • Web — embedding via @font-face (часто по числу просмотров или доменов),
  • App — встраивание в мобильное/десктопное ПО,
  • Server — использование на сервере для генерации изображений/PDF.
• Freeware — бесплатно, но без права модификации/перераспространения (например, Calibri — только для Windows).

Критически важные вопросы при использовании

1. Разрешено ли встраивание в PDF? В PDF есть флаги:
   • No Embedding — нельзя.
   • Preview & Print — можно, но только для просмотра/печати (не для редактирования).
   • Editable — можно редактировать.
     (Контролируется битами в таблице OS/2.fsType.)
2. Можно ли использовать в логотипе? Некоторые коммерческие лицензии требуют отдельного разрешения.
3. Можно ли модифицировать (например, сузить буквы)? OFL разрешает, проприетарные — почти нет.

⚠️ Важно: Microsoft Core Fonts (Arial, Times New Roman, Courier New) — распространяются под EULA, запрещающей веб-встраивание и модификацию. Использование через @font-face — нарушение.

---

9. Типографские категории (классификация гарнитур)

Категория	Характерные черты	Примеры	Применение
Serif (с засечками)	Засечки (serifs) на концах штрихов; высокий контраст или низкий; вертикальный или наклонный строй.	Times New Roman, Georgia, PT Serif, Baskerville, Garamond	Длинные тексты (книги, статьи), печать, официальные документы — за счёт лучшей связности строк.
Sans-serif (без засечек)	Чистые формы, минимум контраста, открытые пропорции.	Arial, Helvetica, Roboto, Open Sans, PT Sans	Интерфейсы, экранное чтение, заголовки, современный дизайн.
Monospace	Все символы — одинаковой ширины.	Courier New, Consolas, Fira Code, JetBrains Mono	Код, терминалы, таблицы, ASCII-арт. Обязательно поддержка ASCII-диаграмм и блоков Unicode.
Display / Decorative	Выразительный дизайн, часто узкоспециализированный.	Lobster, Pacifico, Bebas Neue, Dancing Script	Логотипы, баннеры, краткие заголовки. Непригодны для основного текста.
Script	Имитация рукописного или каллиграфического письма.	Brush Script, Allura, Great Vibes	Приглашения, сертификаты, бренды (luxury, beauty). Часто включают лигатуры.
Slab Serif	Массивные прямоугольные засечки, низкий контраст.	Courier (также моноширинный), Rockwell, Roboto Slab	Заголовки, технические документы, «технический» или «ретро» стиль.
Humanist	Беззасечковые с неравномерными пропорциями, отсылками к каллиграфии.	Calibri, Frutiger, Segoe UI, Noto Sans	UI-дизайн, экранное чтение (лучшая различимость при низком DPI).

Примечание: Современные гарнитуры часто смешивают категории (например, Inter — humanist sans-serif с моноширинными цифрами в tabular form).

---

10. Практические рекомендации по выбору шрифтов

Для веб-интерфейсов

• Основной текст: Inter, Roboto, Open Sans, Noto Sans — проверены на читаемость, поддерживают кириллицу, переменные версии доступны.
• Код: JetBrains Mono, Fira Code (с лигатурами для =>, !=, ===), Cascadia Code.
• Заголовки: Manrope, Montserrat, Raleway — сжатые, высококонтрастные.
• Универсальная пара: Inter (текст) + JetBrains Mono (код).

Для печати и PDF

• Текст: PT Serif, Linux Libertine, Charter — высокая x-height, оптимизированы под 300+ DPI.
• Таблицы: PT Mono, IBM Plex Mono — чёткие цифры, tabular lining.
• Избегайте шрифтов без embedded hinting для малых кеглей (<10 pt).

Для мобильных приложений

• Используйте системные шрифты по умолчанию (-apple-system, BlinkMacSystemFont, system-ui) — они адаптированы под DPI и accessibility-настройки.
• При подключении кастомных — отдавайте предпочтение WOFF2 + переменным шрифтам (экономия трафика).